<div>
	<div id="root-html">
	<style type="text/css">
			header {z-index: 99;}
			p {margin-bottom: 0;}
			.c34 {color: #343434;}
			.c7a {color: #7a7a7a;}
			.cd3 {color: #fd3d3d;}
			.btn:active {color: white;border: 1px solid #fff;}
			body {line-height: normal;}
			/*店铺详情页面*/
.details_header{height: 85px; overflow: hidden;}
.details_header .details_back{width: 10px; height: 18px; background: url(/images/details/back.png) no-repeat; background-size:100% 100% ; margin-top: 17px; position: absolute; z-index: 2; left: 12px;}
.details_header .details_back:before{content: ''; display: block; position: absolute; width:50px; height: 50px; left: -10px; top: -20px;} 
.details_header .details_header_img{height: 100%; width: 100%;}
.details_header .details_header_img img{width: 100%;}
.details{position: relative; z-index: 9999; padding: 0 12px;}
.details_header .details_stars{min-width: 60px; height: 25px; background: #fff; position: absolute; top: 10px; right: 12px; background-image:none; border-radius:17px;} 
.details_header .details_stars div{background-image:none ;} 
.details_header .details_stars .score{color: #f9970e; line-height: normal; text-indent: 5px;} 
.details .details_shop_img{text-align: center;}
.details_header .details_header_img  .score_img{width: 13px; height: 13px;}
.details .details_shop_img img{width: 60px; height: 60px; border-radius: 11px; margin-top: -36px; z-index: 2; position: relative; border: 1px solid #fff;}
.details .title_1{font-size: 20px; margin-top: 12px;}
.details .title_2{color: #a1a1a1;}
/*.details_list .shop_name::before{content: ''; display: block; position: absolute; background: url(images/index_loHome.jpg) no-repeat; width: 12px; height: 12px; background-size:100% 100% ; left: 0; top: 3px;}*/
.details_list  .details_list_ul li.details_list_yue{color: #009944; border: 1px solid #009944; border-radius: 3px;}
.details_list .details_list_gps{ color: #999999; padding-left: 15px; position: relative}
.details_list .details_list_gps::before{content: ''; display: block; position: absolute; width: 8px; height: 11px; background: url(/images/details/details_gps.png) no-repeat; background-size:100% 100% ; left: 0; top: 1px; }
.details_list .details_list_ul li{display: inline-block; color: #f87255; padding: 1px 8px; border-radius: 3px; border: 1px solid #f87255; margin-top:6px; margin-right: 3px;}
/*.details_list .shop_offer.no-more::before{ content: ''; display: block; position: absolute; width: 10px; height: 6px; background: url(images/index_down.jpg) no-repeat; background-size:100% 100% ; right: 0; top: 8px;}*/
.details_list .shop_offer.no-more::before{  content: '';background: none;}
.details_list .shop_offer.more::before{  content: ''; display: block; position: absolute; width: 10px; height: 6px; background: url(/images/details/index_down.jpg) no-repeat; background-size:100% 100% ; right: 0; top: 8px;}
.details_list .shop_offer::before{ content: '';background: none;}
.details_list .shop_offer.cli::before{transform: rotateX(180deg);}
.details_list .details_map{width: 14px; height: 14px; background: url(/images/details/details_map.png) no-repeat; background-size:100% 100%;}
.details_list .details_phone{width: 20px; height: 20px; background: url(/images/details/deatils_phone.png) no-repeat; background-size:100% 100% ;}
.details_list .details_msg_box div{ display: inline-block;}
.details_list .details_phone_box{text-align: right; margin: 0 auto; margin-right: 0; border-left: 1px solid #dcdcdc; padding:7px; padding-left: 15px; padding-right: 7px;} 
.details_voucher{padding: 10px 12px; background: #f1f1f1; overflow: auto; padding-bottom: 6px;}
.details_voucher li{background:#f8dba1;display: inline-block; overflow: hidden;} 
.details_voucher li.receive{background: #ff6160; color: white;}
.details_voucher li.receive.exchange p{color: white;}
.details_voucher li.exchange p{color: #71530b;}
.details_voucher li .exchange_box{display: table; overflow: hidden; padding:10px 15px 10px 20px; border: 1px solid #e5cb79;}
.details_voucher li .exchange_box.ordinary{display: table; overflow: hidden; padding:10px 15px 10px 20px; border: 1px solid #ff6160;}
.details_voucher li .box{display: table-cell; vertical-align: middle;}
.details_voucher li.exchange{color: #71530b;} 
.details_voucher li:last-of-type{margin-right: 12px;}
.details_voucher li.exchange.receive{color: white;}
.details_voucher li .angle_1{width: 20px; height: 20px; background: #f1f1f1; border-radius: 50%; left: 0; top: 0; margin-left: -7px; margin-top: -7px; border-right:1px solid #e5cb79 ; border-bottom:1px solid #e5cb79 ;}
.details_voucher li .angle_2{width: 20px; height: 20px; background: #f1f1f1; border-radius: 50%; right: 0; top: 0; margin-right: -7px; margin-top: -7px;border-left:1px solid #e5cb79 ; border-bottom:1px solid #e5cb79 ;}
.details_voucher li .angle_3{width: 20px; height: 20px; background: #f1f1f1; border-radius: 50%; right: 0; bottom: 0; margin-right: -7px; margin-bottom: -7px;border-left:1px solid #e5cb79 ; border-top:1px solid #e5cb79 ;}
.details_voucher li .angle_4{width: 20px; height: 20px; background: #f1f1f1; border-radius: 50%; left: 0; bottom: 0; margin-left: -7px; margin-bottom: -7px;border-right:1px solid #e5cb79 ; border-top:1px solid #e5cb79 ;}

.details_voucher li .ordinary .angle_1{border-right:1px solid #ff6160 ; border-bottom:1px solid #ff6160 ;}
.details_voucher li .ordinary .angle_2{border-left:1px solid #ff6160 ; border-bottom:1px solid #ff6160 ;}
.details_voucher li .ordinary .angle_3{border-left:1px solid #ff6160 ; border-top:1px solid #ff6160 ;}
.details_voucher li .ordinary .angle_4{border-right:1px solid #ff6160 ; border-top:1px solid #ff6160 ;}

.details_voucher_box{border-right: 1px  dashed #fff; padding-right: 25px;}
.details_voucher_box.special{border-right: 1px  dashed #71530b;}
.shop_offer_more{position: absolute; right: 0; width: 20px; height: 20px;}
.details_list .shop_offer .details_list_ul{overflow: hidden;max-height: 27px;}
.details_list .shop_offer.more .details_list_ul{max-height: 27px;}
.details_list .shop_offer.cli.more .details_list_ul{max-height: none;}
.details_list .shop_offer.no-more .details_list_ul{max-height: none;}
/*功能按钮*/
.details_btn .bt{width: 55px; height: 55px;}
.details_btn .bt.food{background: url(/images/details/details_food.png?11014) no-repeat; background-size:100% 100%; margin: 0 auto;}
.details_btn .bt.order{background: url(/images/details/details_order.png?11014) no-repeat; background-size:100% 100%; margin: 0 auto;}
.details_btn .bt.writer{background: url(/images/details/details_writer.png?11014) no-repeat; background-size:100% 100%; margin: 0 auto;}
.details_btn .bt.account{background: url(/images/details/details_account.png?11014) no-repeat; background-size:100% 100%; margin: 0 auto;}
.details_btn .bt.yuyue{background: url(/images/details/yuyue.png?11014) no-repeat; background-size:100% 100%; margin: 0 auto;}
.details_state{color: #ff6160; padding-bottom: 25px;}
/*会员卡*/
.details_box{background: url('../image/vip/shadow.png'); background-size:100% 100%; height: 0.1rem; position: absolute;width: 100%; bottom: 0;}
.details_vip .title{ padding:20px 12px; font-size: 18px; border-bottom: 1px solid #e9e9e9;}
.details_vip .vip_card{padding: 0 10px;padding-top: 18px;}
.details_vip .card_box{ padding: 16px; border-radius:5px 5px 0 0; background: url(/images/details/details_vip_card.png) no-repeat;}
.details_vip .card_box img{width:50px; height: 50px; border-radius: 5px; border: 1px solid #fff;}
.details_more .btn{padding: 10px 70px; border: 1px solid #636363; text-align: center; border-radius: 30px; display: inline-block; margin: auto;}
.details_vip_content{padding: 0 12px; padding-bottom: 10px;}
.details_food .title{border-bottom: 1px solid #e9e9e9; padding: 15px 12px;}
.details_food .list li{padding: 15px 12px; border-bottom: 1px solid #e9e9e9;}
.details_food .list .le img{width: 55px; height: 55px; border-radius:5px;}
.details_food .list img{width: 15px; height: 15px;}
.details_food .name{margin-top: -2px;}
.details_food .food{margin-top: -2px;}
.details_food .money{margin-top: -3px;}
/*我的预约*/
.reservation .reservation-start img{width: 15px; height: 15px;}
/*用户评价*/
.evealation .header{padding: 12px; border-bottom: 1px solid #ccc;}
.evealation .score .txt{color: #d7301a;}
.evealation .header .cli img{ width: 33px; height: 33px;}
.evealation .header .cli_text{color: #b8b8b8;}
.evealation .total_list{padding:12px; border-bottom: 1px solid #ccc; overflow: hidden; padding-bottom: 3px;}
.evealation .total_list li{background: #eeeeee; color: #666666; margin-left: 8px; padding: 5px 20px; border-radius:18px ; margin-bottom: 10px; font-size: 13px;}
.evealation .total_list li.sel{background: #d7301a; color: white;}
.evealation .footer_list img{width: 44px; height: 44px;}
.evealation .footer_list .satisfaction{width:15px; height: 15px;vertical-align:middle}
.evealation .footer_list_li{border-bottom:1px solid #ccc;}
.evealation .footer_list_li:last-of-type{border-bottom:1px solid #fff;}
.evealation .footer_list_li:first-of-type{border-bottom:1px solid #ccc;}
.evealation .satisfaction_img img{width: 85px; height: 85px; margin-right: 5px; margin-bottom: 5px;}
.evealation .satisfaction_img img:last-of-type{margin-right: 0px;}
.evealation .avatar img{ border-radius:50%;}
.none_img img{width: 100%; height: 100%;}
.none_msg .center{padding-top: 5px; font-size: 20px; color:#cccccc;}
.none_img{height: 70%; width: 80px; overflow: hidden; margin: auto;}
.none_msg{ height:115px; margin:0 auto; margin-top: 50px;}
.evealation .black-mask{background: #000; position: fixed; width: 100%; height: 100%; z-index: 9; top: 0; opacity: 0.6;}
.evealation .black-mask-box{width: 100%; height: 100%; position: fixed; width: 100%; height: 100%; top:0; z-index: 10;}
.evealation .black-mask-box-02{width: 303px; height: 303px; left: 0; top: 0; right: 0; bottom: 0; margin: auto; opacity: 1; z-index: 10; opacity: 1; border: 2px solid #fff; position: absolute;}
.evealation .black-mask-box-02 img{width: 100%; height: 100%;}
/*.evealation .evealation-table {display: table; width: 100%;}*/
/*.evealation .evealation-table-cell{display: table-cell; width: 20%; vertical-align: bottom;vertical-align: top;}*/
.evealation .evealation-table {display: flex; width: 100%;}
.evealation .evealation-table-cell{flex:1;}
.move-box{width: 100%; z-index: 100;}
.box-mo{background: #000000; position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1000; opacity: .7;}
.box-cont{position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 1001; width: 90%; margin: auto; display: table;}
.box-cont .box-show-close{content: ''; position: absolute; width: 30px; height: 30px; background-image: url(../image/delete.png); background-size:100% 100% ; right: 0; top: -45px; border-radius: 30px;}
.box-cont .list{height: 100px; border-radius: 5px; justify-content: center; background-size: 100%;}
.box-cont .box-cont-auto{height: 450px; overflow: auto;}
.pa{position: absolute;}
.pr{position: relative;}
.pad-l-12{padding-left: 12px;}
.pad-r-12{padding-right: 12px;}

div{box-sizing:border-box;}
		</style>
		<header class="details_header pr">
				<div class="details_back pr" onclick="back()"></div>
				<div class="back pa details_header_img" style="background: #000;">
					<img onerror="this.src='/images/details_error2.jpg?001'" style="opacity: 0.7;" />
				</div>
			</header>
			<div id="move" class="move-box pa">
				<div class="details bg-fff">
					<div class="details_shop_img">
						<img  onerror="this.src='/images/default2.png'" />
					</div>
					<div class="center title_1 mag-b-10">店铺名字</div>
					<div class="f-11 title_2 center">店铺描述</div>
					<div class="details_list">
						<div class="fiex">
							<div class="f-12 shop_name pr">
								<img src="/images/details/index_loHome.jpg" style="width: 14px; height: 14px; vertical-align: text-top;" /> 分类名称
							</div>
							<div class="fiex1 mag-l-5">
								<span class="f-11 details_list_gps fr">test</span>
							</div>
						</div>
						<div class="details_msg_box fiex pad-b-10 pad-t-10" style="align-items: flex-start;">
							<div>
								<div class="details_map pad-6 mag-t-4"></div>
							</div>
							<div class="f-12 txt pad-r-5 mag-l-10">店铺地址</div>
							<div class="details_phone_box">
								<a href="tel:'123456'">
									<div class="details_phone"></div>
								</a>
							</div>
						</div>
					</div>
				</div>
				<div style="height: 5px;"></div>
				<!--功能按钮-->
				<div class="pad-r-12 pad-l-12 bg-fff">
					<div class="details_btn pad-t-20 pad-b-20 fiex center ">
						<div class="fiex1">
							<div class="bt food"></div>
							<div class="mag-t-15 f-13">test1</div>
						</div>
						<div class="fiex1">
							<div class="bt order"></div>
							<div class="mag-t-15 f-13">test2</div>
						</div>
						<div class="fiex1">
							<div class="bt writer"></div>
							<div class="mag-t-15 f-13">test3</div>
						</div>
						<div class="fiex1">
							<div class="bt yuyue"></div>
							<div class="mag-t-15 f-13">test4</div>
						</div>
					</div>
					<div class="details_state f-16 center">
						test
					</div>
				</div>
				<!--我的预约-->
				<div class="reservation bg-fff mag-t-5 pad-l-12 pad-r-12 pad-b-20">
					<div class="reservation-tit fiex pad-t-20 pad-b-20">
						<span class="f-18">我的预约</span><span class="f-13 fiex1 f-right reservation-start" style="color: #ff6160;">
						<img  src="/images/start02.png" style="vertical-align: middle;" class="mag-r-5">
						<!--<img  v-if="shop.subscribe_info_my.status==2" src="images/start04.png" style="vertical-align: middle;" class="mag-r-5">
						<img  v-if="shop.subscribe_info_my.status==3" src="images/start05.png" style="vertical-align: middle;" class="mag-r-5">
						<img  v-if="shop.subscribe_info_my.status==4" src="images/start03.png" style="vertical-align: middle;" class="mag-r-5">
						<img  v-if="shop.subscribe_info_my.status==5" src="images/start01.png" style="vertical-align: middle;" class="mag-r-5">
						<img  v-if="shop.subscribe_info_my.status==6" src="images/start02.png" style="vertical-align: middle;" class="mag-r-5">-->
						<span class="c999" >test</span>
						<!--<span class="c999" v-if="shop.subscribe_info_my.status==2">{{lang[1077]}}</span>
						<span class="c999" v-if="shop.subscribe_info_my.status==3">{{lang[1072]}}</span>
						<span class="c999" v-if="shop.subscribe_info_my.status==4">{{lang[1078]}}</span>
						<span class="c999" v-if="shop.subscribe_info_my.status==5">{{lang[1079]}}</span>
						<span class="c999" v-if="shop.subscribe_info_my.status==6">{{lang[1080]}}</span>-->
						</span>
					</div>
					<ul class="reservation-cont">
						<li class="mag-b-5">
							<span class="c666 f-12 mag-r-5">到店时间 : </span><span class="c666 f-12">1996-1-15</span>
						</li>
						<li class="mag-b-5">
							<span class="c666 f-12 mag-r-5">到店人数 : </span><span class="c666 f-12">1</span>
						</li>
						<li class="mag-b-5">
							<span class="c666 f-12 mag-r-5">预约菜品 : </span><span class="c666 f-12">菜品</span>
						</li>
						<li class="mag-b-5">
							<span class="c666 f-12 mag-r-5">test : </span><span class="c666 f-12">test</span>
						</li>
						<li class="mag-b-5">
							<span class="c666 f-12 mag-r-5">test : </span><span class="c666 f-12"><span>test,<span></span></span>共RM</span>
						</li>
					</ul>
				</div>
				<!--会员卡暂无-->
				<!--推荐菜品暂无-->
				
			</div>
			<!--222-->
			<!--弹出的菜谱-->
		<script>
			var app = new Vue({
				el: '#root-html',
				data: {

				},
				mounted: function() {
				}
			})
		</script>

	</div>
</div>